<template>
  <div class="homeNav">
    <div class="header">
      <div class="plus">
        <van-icon name="plus" size="15" color="black" />
      </div>
      <div class="search" @click="toSearch">
        <van-icon
          name="search"
          size="20"
          color="#a2a2a2"
          style="margin-left: 12px"
        />
        <input type="text" placeholder="请输入" />
      </div>
      <div class="favorites">
        <van-icon name="bars" size="25" @click="toClassification" />
      </div>
      <div class="news">
        <van-icon name="bell" size="25" badge="2" @click="toNews" />
      </div>
    </div>
    <div class="footer">
      <RouterLink to="/follow">关注</RouterLink>
      <RouterLink to="/recommend">推荐</RouterLink>
      <RouterLink to="/note">笔记</RouterLink>
      <RouterLink to="/vedio">视频</RouterLink>
      <RouterLink to="/activity">活动</RouterLink>
    </div>
  </div>
  <div class="likehomeNav"></div>
</template>

<script setup lang="ts">
import router from "@/router";

const toSearch = () => {
  // console.log("toSearch");
  router.push({ path: "search" });
};

const toClassification = () => {
  // console.log("toClassification");
  router.push({ path: "/classification" });
};

const toNews = () => {
  console.log("toNews");
};
</script>

<style lang="scss" scoped>
.homeNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 112px;
  background-color: white;
  z-index: 10;

  .header {
    margin-top: 14px;
    margin-bottom: 21px;
    width: 100%;
    display: flex;
    align-items: center;

    .plus {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #ffc632;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 16px;
    }

    .search {
      display: flex;
      align-items: center;
      width: 216px;
      height: 40px;
      background-color: #f6f6f6;
      margin-left: 10px;
      cursor: pointer;

      input {
        background: none;
        outline: none;
        border: 0px;
        color: #a2a2a2;
        margin-left: 5px;
      }

      input[type="text"]:focus,
      input[type="password"]:focus {
        background: none;
        outline: none;
      }
    }

    .favorites {
      margin-left: 20px;
    }

    .news {
      margin-left: 20px;
    }
  }

  .footer {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 10px;

    a {
      color: black;
    }

    .router-link-active {
      font-size: 20px;
    }
  }
}

.likehomeNav {
  height: 112px;
}
</style>
